<template>
    <div class="home">
        <!-- 导航 -->
        <div class="nav">
            <wsmnav></wsmnav>
        </div>

        <div class="home_content">
            <!-- 菜单 -->
            <div class="menu">
                <el-menu :default-active="defaultActionMenu" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>
                    <el-menu-item index="/admin/Welcome">
                        <i class="el-icon-s-home"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/Managemusic">
                        <i class="el-icon-s-operation"></i>
                        <span slot="title">歌曲管理</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/Adminlikes">
                        <i class="el-icon-share"></i>
                        <span slot="title">推荐歌曲</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/Userservice">
                        <i class="el-icon-user-solid"></i>
                        <span slot="title">开机服务</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/Allorders">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">订单查询</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <!-- 内容区域 -->
            <div class="content">
                <router-view></router-view>    <!--路由出口，-->
            </div>
        </div>

    </div>
</template>

<script>
import wsmnav from '@/components/nav.vue'
export default {
    name: 'home',
    data:function(){
        return{
            
        }
    },
    components: {
        wsmnav
    },
    computed:{      //计算属性方式
        defaultActionMenu(){
            return this.$router.path
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    .nav {
        width: 100%;
        border-bottom: 1px solid rgb(173, 166, 166);
    }

    .home_content {
        display: flex;

        .menu {
            width: 192px;
            height: 100vh;

            .el-menu {
                height: 100%;
            }
        }

        .content {
            width: calc(100% - 192px); //要加空格
            /**电脑宽度都不一样，192px是左边菜单栏的宽度 */
            // padding-left: 10px;
            padding-right: 20px;
        }
    }
}</style>